<template>
  <div class="topwrap">
    <!-- 朋友之间的信息 -->
    <div class="Wrap"
         v-if="message.m_MessageTypeID === 1 || message.m_MessageTypeID === 6">
      <!-- 头像 -->
      <img :class="message.m_FromUserID === selfInfo.u_LoginID ? 'avatarRight' : 'avatarLeft'"
           :src="singleHeadPhoto"
           @click="personInfoDialog=true"
           style="cursor:pointer;width:30px;height:30px;border-radius:50%">
      <!-- 个人消息 -->
      <div class="commonWrap"
           v-if="message.m_MessageTypeID === 1">
        <!-- 自己的消息 -->
        <div v-if="message.m_FromUserID === selfInfo.u_LoginID"
             class="selfMsgWrap">
          <div class="selfMsg"
               v-html="message.m_PostMessages"></div>

        </div>
        <!-- 别人的消息 -->
        <div v-if="message.m_FromUserID !== selfInfo.u_LoginID"
             class="otherMsgWrap">
          <div class="otherMsg"
               v-html="message.m_PostMessages"></div>

        </div>
      </div>

      <!-- 文件消息 -->
      <div class="commonWrap"
           v-if="message.m_MessageTypeID === 6">
        <!-- 自己的消息 -->
        <div :class="message.m_FromUserID === selfInfo.u_LoginID ? 'selfMsgWrap' : 'otherMsgWrap'">
          <!-- 显示主体内容 -->
          <div :class="message.m_FromUserID === selfInfo.u_LoginID ? 'selfMsg' : 'otherMsg'">
            <!-- 是图片消息 -->
            <div class="imgMsg"
                 v-if="file.type === 'img'">
              <img :src="file.url"
                   style="height:150px"
                   @click="previewImg">
            </div>

            <!-- 是其它文件消息 -->
            <div class="fileMsgWrap"
                 v-if="file.type !== 'img'">
              <!-- 上部分盒子 -->
              <div class="aboveBox">
                <!-- 左边图标 -->
                <div class="filelogo">
                  <img :src="filelogo">
                </div>
                <!-- 右边的文件名字和大小 -->
                <div class="info">
                  <div class="filename">{{file.name}}</div>
                  <div class="filesize">{{file.size}}</div>
                </div>
              </div>
              <!-- 下部分盒子 -->
              <div class="downBox">
                <span @click="preview">预览</span>
                <span @click="download(file.url)">下载</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- 群的信息 -->
    <div class="Wrap"
         v-if="message.m_MessageTypeID === 5 || message.m_MessageTypeID === 7">
      <!-- 头像 -->
      <img :class="message.m_FromUserID === selfInfo.u_LoginID ? 'avatarRight' : 'avatarLeft'"
           :src="groupHeadPhoto"
           @click="personInfoDialog=true"
           style="cursor:pointer;width:30px;height:30px;border-radius:50%">
      <!-- 个人文字消息 -->
      <div class="username"
           :class="message.m_FromUserID === selfInfo.u_LoginID ? 'usernameRight' : 'usernameLeft'"><span @click="reviseSelfNickname">{{message.m_NickName}}</span></div>
      <div class="commonWrap"
           v-if="message.m_MessageTypeID === 5">
        <!-- 自己的消息 -->
        <div v-if="message.m_FromUserID === selfInfo.u_LoginID"
             class="selfMsgWrap">
          <div class="selfMsg"
               v-html="message.m_PostMessages"></div>

        </div>
        <!-- 别人的消息 -->
        <div v-if="message.m_FromUserID !== selfInfo.u_LoginID"
             class="otherMsgWrap">
          <div class="otherMsg"
               v-html="message.m_PostMessages"></div>

        </div>
      </div>

      <!-- 文件消息 -->
      <div class="commonWrap"
           v-if="message.m_MessageTypeID === 7">
        <!-- 自己的消息 -->
        <div :class="message.m_FromUserID === selfInfo.u_LoginID ? 'selfMsgWrap' : 'otherMsgWrap'">
          <!-- 显示主体内容 -->
          <div :class="message.m_FromUserID === selfInfo.u_LoginID ? 'selfMsg' : 'otherMsg'">
            <!-- 是图片消息 -->
            <div class="imgMsg"
                 v-if="file.type === 'img'">
              <img :src="file.url"
                   style="height:150px"
                   @click="previewImg">
            </div>

            <!-- 是其它文件消息 -->
            <div class="fileMsgWrap"
                 v-if="file.type !== 'img'">
              <!-- 上部分盒子 -->
              <div class="aboveBox">
                <!-- 左边图标 -->
                <div class="filelogo">
                  <img :src="filelogo">
                </div>
                <!-- 右边的文件名字和大小 -->
                <div class="info">
                  <div class="filename">{{file.name}}</div>
                  <div class="filesize">{{file.size}}</div>
                </div>
              </div>
              <!-- 下部分盒子 -->
              <div class="downBox">
                <span @click="preview">预览</span>
                <span @click="download(file.url)">下载</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- 预览弹窗 -->
    <el-dialog :visible.sync="previewDialog"
               width="50%"
               :before-close="handleClose"
               append-to-body>
      <!-- 视频预览 -->
      <video-player class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                    v-if="file.type === 'video'">
      </video-player>
    </el-dialog>
    <!-- 预览音乐 -->
    <el-dialog :visible.sync="previewMusicDialog"
               width="30%"
               :before-close="handleClose"
               append-to-body
               v-if="previewMusicDialog">
      <audio :src="file.url"
             controls="controls"></audio>
    </el-dialog>

    <!-- 预览图片 -->
    <el-dialog :visible.sync="previewImgDialog"
               width="40%"
               append-to-body>
      <img :src="file.url"
           style="width:100%">
    </el-dialog>

    <!-- 显示某个人的信息 -->
    <el-dialog :visible.sync="personInfoDialog"
               width="50%"
               append-to-body
               v-if="personInfoDialog">
      <user-info :account="message.m_FromUserID"
                 style="height:300px"></user-info>
    </el-dialog>

    <el-dialog :visible.sync="reviseNickNameDialog"
               title="修改备注"
               width="20%"
               append-to-body
               v-if="reviseNickNameDialog">
      <!-- 用于修改自己在群中的备注 -->
      <div class="reviseNickNameWrap">
        <el-input size="mini"
                  style="width:200px"
                  v-model="selfNicknameInGroup"></el-input>
        <el-button size="mini"
                   type="primary"
                   class="el-icon-check"
                   circle
                   style="margin-left:2px"
                   @click="submitReviseNickname"></el-button>
        <el-button size="mini"
                   class="el-icon-close"
                   circle
                   @click="reviseNickNameDialog=false"></el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'

import 'video.js/dist/video-js.css'

import UserInfo from '../components/userinfo/UserInfo.vue'
export default {
  name: 'Message',
  props: ['message', 'toInfo'],
  components: {
    videoPlayer,
    UserInfo
  },
  created () {
    // 代表是文字信息
    if (this.message.m_MessageTypeID === 6 || this.message.m_MessageTypeID === 7) {
      this.file = JSON.parse(this.message.m_PostMessages)
      // 代表不是图片
      if (this.file.type !== 'img') {
        this.filelogo = require('../assets/imgs/' + this.file.type + '.png')
      }
    }
    this.selfInfo = JSON.parse(window.sessionStorage.getItem('selfInfoall'))
    this.singleHeadPhoto = this.message.m_FromUserID === this.selfInfo.u_LoginID ? this.selfInfo.u_HeadPortrait : this.toInfo.avatar
    this.groupHeadPhoto = this.message.m_FromUserID === this.selfInfo.u_LoginID ? this.selfInfo.u_HeadPortrait : this.message.m_Icon
  },
  data () {
    return {
      file: {},
      selfInfo: {},
      // 头像 自己的或者别人的 个人消息
      singleHeadPhoto: '',
      // 文件的logo 地址
      filelogo: '',
      // 头像 自己的或别人的 群
      groupHeadPhoto: '',
      // 预览弹窗
      previewDialog: false,
      // 视频配置
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 倍速控制
        autoplay: true, // 是否自动播放
        muted: false, // 是否静音播放
        loop: false, // 是否循环播放
        preload: 'auto',
        aspectRatio: '16:9', // 比例
        fluid: true,
        language: 'zh-CN',
        sources: [
          {
            type: 'video/mp4',
            src: ''
          }
        ],
        poster: '', // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true, // 剩余时间是否显示
          remainingTimeDisplay: false, // 剩余时间是否显示，有一个即可
          fullscreenToggle: true // 全屏按钮
        }
      },
      // 预览音频
      previewMusicDialog: false,
      // 预览图片
      previewImgDialog: false,
      // 点击头像后显示某个人的信息
      personInfoDialog: false,
      // 修改自己在群中的备注的弹窗
      reviseNickNameDialog: false,
      // 自己在群中的备注信息
      selfNicknameInGroup: ''
    }
  },
  methods: {
    // 预览
    preview () {
      // 视频
      if (this.file.type === 'video') {
        this.playerOptions.sources[0].src = this.file.url
        this.previewDialog = true
      } else if (this.file.type === 'word' || this.file.type === 'ppt' || this.file.type === 'excel') {
        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + this.file.url)
      } else if (this.file.type === 'pdf') {
        window.open(this.file.url)
      } else if (this.file.type === 'music') {
        this.previewMusicDialog = true
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    previewImg () {
      this.previewImgDialog = true
    },
    // 下载文件
    download (url) {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.responseType = 'blob'
      xhr.send()
      xhr.onload = function () {
        const fileBlob = xhr.response
        console.log(fileBlob)
        const fileUrl = URL.createObjectURL(fileBlob)
        console.log(fileUrl)
        const elementA = document.createElement('a')
        elementA.setAttribute('href', fileUrl)
        elementA.setAttribute('download', '')
        elementA.click()
      }
    },
    // 修改自己的昵称显示弹窗
    reviseSelfNickname () {
      // 如果是自己的id
      if (this.message.m_FromUserID === window.sessionStorage.getItem('selfInfo')) {
        this.selfNicknameInGroup = this.message.m_NickName
        this.reviseNickNameDialog = true
      }
    },

    // 提交修改后的昵称
    submitReviseNickname () {
      if (this.selfNicknameInGroup === '') {
        return this.$message.danger('昵称不得为空')
      }
      // 提交后台进行修改
      this.$http.get('reviseNickname', { params: { groupID: this.message.m_ToUserID, userID: this.message.m_FromUserID, newName: this.selfNicknameInGroup } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        // 刷新本用户所有message的昵称
        this.message.m_NickName = this.selfNicknameInGroup
        this.$emit('refreshNickname', this.message)
      })
      this.reviseNickNameDialog = false
    }
  }
}
</script>

<style lang="less" scoped>
.topwrap {
  margin-top: 10px;
}
.Wrap {
  position: relative;
  min-height: 30px;

  .username span:hover {
    color: #51ccf1d9;
    cursor: pointer;
  }

  .commonWrap {
    padding: 0 40px;

    .selfMsgWrap {
      text-align: right;

      .selfMsg {
        padding: 3px;
        background-color: #e5e5e59c;
        display: inline-block;
        border-radius: 7px 0 7px 7px;
      }
    }

    .otherMsgWrap {
      text-align: left;

      .otherMsg {
        padding: 3px;
        background-color: #e5e5e59c;
        display: inline-block;
        border-radius: 0 7px 7px 7px;
      }
    }

    // 文件消息样式
    .fileMsgWrap {
      width: 300px;
      height: 85px;

      .aboveBox {
        width: 100%;
        height: 65px;
        border-bottom: 1px solid #bda8a8;
        padding-top: 10px;
        padding-left: 10px;
        .filelogo {
          float: left;
          img {
            height: 40px;
          }
        }

        .info {
          float: left;
          margin-left: 10px;
          font-size: 14px;
          font-family: "黑体";
          .filesize {
            text-align: left;
          }
        }
      }
      .downBox {
        width: 100%;
        height: 19px;

        span {
          margin-right: 15px;
          font-size: 12px;
          color: #53a3dc;
          cursor: pointer;
        }
      }
    }
  }
}

.avatarLeft {
  position: absolute;
  left: 0;
}

.avatarRight {
  position: absolute;
  right: 0;
}

.usernameLeft {
  text-align: left;
  padding-left: 42px;
  font-size: 12px;
  color: #8080809c;
}

.usernameRight {
  text-align: right;
  padding-right: 42px;
  font-size: 12px;
  color: #8080809c;
}

.downBox {
  text-align: right;
}
</style>
